<template>
  <basic-container v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">管理门店</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="editClick"
          >修改</el-button
        >
      </div>
      <div class="haruyuki-content">
        <div class="merchant-title mer-m-b-8">
          {{ storeForms.userShortName }}
        </div>
        <div class="merchant-box">
          <div class="merchant-item-content">
            <span>门店名称：{{ storeForms.rpsName }}</span>
            <span
              >门店省市区：{{ storeForms.provinceName }}/{{
                storeForms.cityName
              }}/{{ storeForms.areaName }}</span
            >
            <span>门店地址：{{ storeForms.address }}</span>
            <span>创建时间：{{ storeForms.produceTime }}</span>
          </div>
          <div class="merchant-item-content">
            <span>负责人：{{ storeForms.contactName }}</span>
            <span>联系方式：{{ storeForms.encryContactPhone }}</span>
            <span>联系邮箱：{{ storeForms.email }}</span>
          </div>
        </div>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-set-up"></i><span class="haruyuki-ml-6">{{ posTitle.modelTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          class="merchant-icon-func"
          v-for="moduleItem in moduleData"
          :key="moduleItem.id"
          @click="moduleOperate(moduleItem.id)"
        >
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>
    </section>
    <el-dialog
      :title="`编辑${storeForms.rpsName}`"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <avue-form ref="serveForm" :option="storeOption" v-model="storeForm" @submit="storeSubmit">
        <!-- 自定表单省市区 -->
        <template slot-scope="scope" slot="provinceCityArea" v-if="isShowMap" >
          <avue-cascader placeholder="请选择" lazy :lazy-load="lazyLoad" :props='{label: "name",value: "code"}' v-model="storeForm.provinceCityArea" ></avue-cascader>
        </template>
      </avue-form>
    </el-dialog>
    <!-- 地图 -->
    <!-- <el-dialog
      title="选择地图"
      append-to-body
      :visible.sync="mapShow"
      :close-on-click-modal="false"
    >
      <MapContainer v-if="mapShow" :center="[this.storeForm.lon,this.storeForm.lat]" ref="MapContainer"/>
      <div style="display: flex;justify-content: flex-end;">
        <el-button type="primary"  @click="mapConfirm">确定</el-button>
      </div>
    </el-dialog> -->
  </basic-container>
</template>

<script>
import { getDetail, updateRpi } from "@/api/rb-merchant/posStore/pos_store";
import { getRegion,getCityCode } from "@/api/system/dict";
import { isMobile } from "@/util/validate";
// import MapContainer from "@/components/map/MapContainer";

export default {
  components: {},
  data() {
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else if (!isMobile(value)) {
        callback(new Error("手机号码不正确！"));
      } else {
        callback();
      }
    };
    return {
      isShowMap:true,
      mapShow:false,
      posTitle: {
        basicTitle: "门店信息",
        modelTitle: "门店管理",
      },
      dialogVisible: false,
      moduleData: [
        {
          id: 1,
          name: "音响管理",
          image: "/img/merchant-icon/sound.png",
          show: true,
        },
        {
          id: 2,
          name: "终端管理",
          image: "/img/merchant-icon/terminal.png",
          show: true,
        },
        {
          id: 3,
          name: "打印机管理",
          image: "/img/merchant-icon/printer.png",
          show: true,
        },
        {
          id: 4,
          name: "收银员管理",
          image: "/img/merchant-icon/cashier.png",
          show: true,
        },
      ],
      rpiNo: "",
      storeId: "",
      loading: false,
      storeForms: {},
      storeForm: {},
      storeOption: {
        column: [
          {
            label: "主键",
            prop: "id",
            type: "input",
            //sortable: true,
            display: false,
            hide: true,
          },
          {
            label: "门头名称",
            prop: "rpiNo",
            type: "select",
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "门店编号",
            prop: "rpsNo",
            type: "input",
            //sortable: true,
            slot: true,
            display: false,
            overHidden: true,
          },
          {
            label: "门店名称",
            prop: "rpsName",
            type: "input",
            search: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入门店名称",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "创建日期",
            prop: "produceTime",
            type: "input",
            //sortable: true,
            display: false,
            overHidden: true,
          },
          {
            label: "省份",
            prop: "province",
            slot: true,
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "地市",
            prop: "city",
            slot: true,
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "区县",
            prop: "area",
            slot: true,
            display: false,
            hide: true,
            overHidden: true,
          },
          {
            label: "省份/地市/区县",
            labelWidth: 130,
            prop: "provinceCityArea",
            type: "cascader",
            props: {
              label: "name",
              value: "code",
            },
            // lazy: true,
            // async lazyLoad(node, resolve) {
            //   let stop_level = 2;
            //   let level = node.level;
            //   let data = node.data || {};
            //   let code = data.code;
            //   let list = [];
            //   let callback = () => {
            //     resolve(
            //       (list || []).map((ele) => {
            //         return Object.assign(ele, {
            //           leaf: level >= stop_level,
            //         });
            //       })
            //     );
            //   };
            //   if (level == 0) {
            //     await getRegion(code).then(
            //       (res) => {
            //         list = res.data.data;
            //         callback();
            //       },
            //       (error) => {
            //         window.console.log(error);
            //       }
            //     );
            //   } else if (level == 1) {
            //     await getRegion(code).then(
            //       (res) => {
            //         list = res.data.data;
            //         callback();
            //       },
            //       (error) => {
            //         window.console.log(error);
            //       }
            //     );
            //   } else if (level == 2) {
            //     await getRegion(code).then(
            //       (res) => {
            //         list = res.data.data;
            //         callback();
            //       },
            //       (error) => {
            //         window.console.log(error);
            //       }
            //     );
            //   } else {
            //     callback();
            //   }
            // },
            span: 24,
            showColumn: false,
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择省份/地市/区县",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "门店地址",
            prop: "address",
            type: "textarea",
            span: 24,
            minRows: 2,
            rules: [
              {
                required: true,
                message: "请选择详细地址",
                trigger: "change",
              },
            ],
            overHidden: true,
            width: 200,
          },
          {
            label: "经度",
            prop: "lon",
            display: false,
            hide: true,
            overHidden:true,
          },
          {
            label: "纬度",
            prop: "lat",
            display: false,
            hide: true,
            overHidden:true,
          },
          {
            label: "负责人",
            prop: "contactName",
            search: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入负责人",
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "联系方式",
            prop: "contactPhone",
            search: true,
            rules: [
              {
                required: true,
                validator: validatePhone,
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
          {
            label: "联系邮箱",
            prop: "email",
            rules: [
              {
                required: true,
                message: "请输入联系邮箱",
                // validator: validatePhone,
                trigger: "blur",
              },
            ],
            overHidden: true,
          },
        //   {
        //     label: "门店状态",
        //     prop: "storeStatus",
        //     type: "select",
        //     dicUrl: "/api/blade-system/dict/dictionary?code=store_status",
        //     props: {
        //       label: "dictValue",
        //       value: "dictKey",
        //     },
        //     dataType: "string",
        //     showColumn: false,
        //     display: false,
        //     rules: [
        //       {
        //         required: true,
        //         message: "请输入门店状态",
        //         trigger: "blur",
        //       },
        //     ],
        //   },
        ],
      },
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    this.infoData();
  },
  mounted() {},
  methods: {
    editClick(){
      this.dialogVisible = true;
      this.$refs.serveForm.resetForm();
      this.storeForm = JSON.parse(JSON.stringify(this.storeForms))
    },
    async lazyLoad(node, resolve) {
      let stop_level = 2;
      let level = node.level;
      let data = node.data || {};
      let code = data.code;
      let list = [];
      let callback = () => {
        resolve(
          (list || []).map((ele) => {
            return Object.assign(ele, {
              leaf: level >= stop_level,
            });
          })
        );
      };
      if (level == 0) {
        await getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else if (level == 1) {
        await getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else if (level == 2) {
        await getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        callback();
      }
    },
    // /* 地图确认经纬度 */
    // mapConfirm(){
    //   let maplatlng = this.$refs.MapContainer.form;
    //   let that = this;
    //   if(maplatlng.lng){
    //     this.isShowMap = false;

    //     this.storeForm.lon = maplatlng.lng;
    //     this.storeForm.lat = maplatlng.lat;
    //     // 
    //     this.storeForm.address = maplatlng.address;
    //     getCityCode(maplatlng.adcode).then(res=>{
    //       let data = res.data.data
    //       that.$nextTick(()=>{
    //         this.storeForm.provinceCityArea = [data.provinceCode, data.cityCode, data.districtCode];
    //         // console.log([data.provinceCode, data.cityCode, data.districtCode])
    //         this.isShowMap = true;
    //         this.mapShow = false;
    //       })
    //     })
    //   }else{
    //     this.$message.error('请选择详细地址');
    //   }
    // },
    /**
     * @func 门店信息编辑提交
     * @desc 提交已修改的门店信息
     * */
    storeSubmit(row, done, loading) {
      [row.province, row.city, row.area] = row.provinceCityArea;

      updateRpi(row).then(() => {
        this.infoData();
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.$refs.serveForm.resetForm();
        done();
      },
      (error) => {
        loading();
        window.console.log(error);
      }
      );
    },
    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
        case 1:
          this.$router.push({ path:'/rb-merchant/posinfo/terminal/store/sound',query:{title:'音响',rpiNo:this.storeForms.rpiNo,rpsNo:this.storeForms.rpsNo}})
          break;
        case 2:
          this.$router.push({
            path: '/rb-merchant/posinfo/pos_info_terminal_bind',
            query: {
              rpsNo: this.storeForms.rpsNo,
              rpsName: this.storeForms.rpsName
            },
          });
          break;
        case 3:
          this.$router.push({ path:'/rb-merchant/posinfo/terminal/store/printer',query:{title:'打印机',rpiNo:this.storeForms.rpiNo,rpsNo:this.storeForms.rpsNo}})
          break;
        case 4:
          this.$router.push({
            name: "收银员管理",
            query: {
              rpiNo: this.storeForms.rpiNo,
              rpsNo: this.storeForms.rpsNo,
              rpsName: this.storeForms.rpsName
            },
          });
          break;
        case 5:
          break;
      }
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.storeId = this.$route.query.storeNo;
      getDetail(this.storeId).then((res) => {
        this.storeForm = res.data.data;
        this.storeForms = res.data.data;
        this.$nextTick(() => {
            this.storeForm.provinceCityArea = [
                this.storeForm.province,
                this.storeForm.city,
                this.storeForm.area,
            ];
            this.storeForms.provinceCityArea = [
                this.storeForm.province,
                this.storeForm.city,
                this.storeForm.area,
            ];
        });
      });
    },
    handleClose(done) {
      this.emptyForm();
      done();
      this.infoData();
    },
    emptyForm() {
      this.$refs["tostoreForm"].$refs["storeForm"].resetFields();
      // this.$refs["toCardForm"].$refs["cardForm"].resetFields();
      // this.$refs["toRateForm"].$refs["rateForm"].resetFields();
      // this.$refs["toShopForm"].$refs["shopForm"].resetFields();
    },
    /**
     * @func 返回页面
     * @desc 返回页面 goBack
     * */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
  font-size: 18px;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
  }
  .cursor {
    cursor: pointer;
  }
}

.mer-m-b-8 {
  margin-bottom: 8px;
}

.img-margin-r10 {
  margin-right: 10px;
}
</style>